<template>
  <div class="home-view flex-1 relative overflow-y-auto">
    <div class="absolute top-0 left-0 w-full h-full p-4">
      <h1 class="text-2xl font-bold mb-4">{{ t('nav.home') }}</h1>
      <p class="text-muted-foreground mb-6">{{ t('routes.home') }}</p>
      <p v-if="userStore.isLoggedIn" class="mb-4">
        {{ t('login.welcome') }}: <span class="font-semibold">{{ userStore.currentUserName }}</span>
      </p>

      <!-- 模拟大量内容 -->
      <div v-for="i in 100" :key="i" class="mb-2 p-3 bg-secondary/20 rounded-md">
        <p class="text-sm text-secondary-foreground">{{ t('common.loading') }} {{ i }}</p>
      </div>

      <p class="mt-6 text-muted-foreground">{{ t('common.success') }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { t } from '@/i18n';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
</script>

<style scoped>
/* 可以根据需要添加额外的样式 */
</style>
